<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="description"
          content=""/>
    <script src="__PUBLIC__/view/js/jquery-1.8.3.js"></script>
    <script src="__PUBLIC__/view/js/jquery.reveal.js"></script>
    <script src="__PUBLIC__/view/js/jquery.cookie.js"></script>
    <script src="__PUBLIC__/view/js/jquery.fly.min.js"></script>
    <script src="__PUBLIC__/view/js/common.js"></script>
    <script src="__PUBLIC__/view/js/template.js"></script>
    <script src="__PUBLIC__/view/js/jquery.tmpl.js"></script>


    <script src="__PUBLIC__/view/js/cart.lib.js"></script>
    <script src="__PUBLIC__/view/js/cart.js"></script>
    <script src="__PUBLIC__/admin/layer/layer.js"></script>
    <script src="__PUBLIC__/admin/js/dialog.js"></script>



    <!--Async.js-->
    <script>
        window.template();
    </script>



    <!--弹出框商品菜-->
    <script type="text/html" id="tpDishs">
        <li class='checkout-tablerow'>
            <div class='cell itemname' id="dishone">${name}</div>
            <div class='cell itemquantity'>${count}</div>
            <div class='cell itemtotal'>${price}</div>
        </li>
    </script>

    <link rel="icon" href="__PUBLIC__/view/img/favicon.ico" type="image/x-icon"/>
    <!--[if lte IE 10]>
    <script src="__PUBLIC__/view/js/requestAnimationFrame.js"></script>


    <![endif]-->

    <link rel=stylesheet href="__PUBLIC__/view/css/reset.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/common.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/base.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/shop.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/header.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/shopcart.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/leftmenu.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/reveal.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/login.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/mycommon.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/doing.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/swiper-3.3.1.min.css">


    <link rel=stylesheet href="__PUBLIC__/view/css/mescroll.min.css">

    <script src="__PUBLIC__/view/js/mescroll.min.js"></script>
    <title>厨师端</title>

</head>
<body>

<script type="text/html" id="template1">

    <div class="menu-item" order-id="${orderId}">
        <div class="item-wrap">
            <img src="__PUBLIC__/view/img/timg.png" height="130" width="130">
            <div class="item-detail">
                <span class="name" item-name="${name}"style="font-size: 15px;">${name}</span>    <!--item-name自定义属性-->
                <br>
                <span class="price"  item-price="${price}">￥${price}</span>


                <div class="dishContent">
                    <ul class="itemCheckout-body" id="itemCheckout-body">

                        {{each(i, item) dish}}
                            {{if i < 3 }}
                                    <li class='checkout-tablerow'>
                                        <div class='cell itemname text_align_left' style="text-align: left">${item.name}</div>
                                        <div class='cell itemquantity text_align_left'>${item.count}</div>
                                    </li>
                            {{else}}
                            {{/if}}

                        {{/each}}

                        {{if dish.length > 3 }}
                        <li class='checkout-tablerow'>
                            .....
                        </li>
                        {{/if}}
                    </ul>
                </div>
            </div>
            <input class="tableNum" type="hidden" value="${tableNum}"></input>
            <input class="count" type="hidden" value="${count}"></input>
        </div>
    </div>
</script>




<!--header部分-->
<div class="header shadow">
    <div class="header-left fl">
        <div class="icon fl"></div>
        <a class="weixin-dingfan fw" href="#">微信订饭</a>
        <a class="logo" href="/"></a>

        <div class="search hide">
            <img class="search-icon" src="__PUBLIC__/view/img/icon_search.png" width="20" height="20">
            <input id="search-input" class="search-input" type="text" placeholder="" onkeypress="onKeySearch()">
            <span id="search-del" class="search-del">&times;</span>
        </div>
        <div class="clear"></div>
    </div>
    <div class="header-right fr">
        <div class="login fl">
                    <span class="header-operater">
                    <a href="place.html">首页</a>
                    <a href="#" class="hide">我的订单</a>
                    <a class="hide">联系我们</a>
                    </span>
            <a id="header-login" class="navBtn f-radius f-select n" data-reveal-id="myDoing" data-animation="fade">
                登录
            </a>
        </div>
        <div id="cart" class="cart fr">
            <img class="cart-icon" src="__PUBLIC__/view/img/icon_cart_22_22.png">
        </div>
        <div id="user" class="user fr n">
            <img class="user-icon" src="__PUBLIC__/view/img/icon_my.png">
        </div>
    </div>
</div>


<div class="content-middle n" >
<div id="mescroll" class="mescroll">


<!--菜品展示-->

<!--<div class="swiper-container" style="overflow: auto">-->
    <!--&lt;!&ndash;<div class="refreshtip hide">下拉可以刷新</div>&ndash;&gt;-->
    <!--<div class="swiper-wrapper w">-->
        <!--<div class="swiper-slide d">-->
            <!--<div class="init-loading list-group-item text-center text_align_center" style="display: none;">下拉可以刷新</div>-->
            <!--<div class="swiper-container2">-->
                <!--<div class="swiper-wrapper" id="idSwiper" style="height: 500px">-->

    <div id="m1" class="menu-wrap">
        <!--&lt;!&ndash; 动态&ndash;&gt;-->
        <!--<div class="menu-item" item-id="1466524398193">-->
        <!--<div class="item-wrap">-->
        <!--<img src="img/test01.jpg" height="130" width="130">-->
        <!--<div class="item-detail">-->
        <!--<span class="name ">宫保鸡丁+鸡蛋炒黄瓜+西红柿抄牛腩。。。。</span>-->
        <!--<span class="price"  item-price="15">￥15</span>-->
        <!--<img class="buy" src="img/icon_buy.png" >-->

        <!--<ul class="stars" data-node="star">-->
        <!--<li data-value="1" class="active"></li>-->
        <!--<li data-value="2" class="active"></li>-->
        <!--<li data-value="3" class="active"></li>-->
        <!--<li data-value="4" class="active"></li>-->
        <!--<li data-value="5" class=""></li>-->
        <!--</ul>-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->

    </div>






                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->

    <!--<div class="loadtip  text_align_center">上拉加载更多</div>-->
    <!--<div class="swiper-scrollbar"></div>-->

</div>

</div>


<!--数据-->
<input id="inputData" type="hidden" value="">

<!--弹出框 TODO:弹出框需要自适应 -->
<div id="myDoing" class="reveal-modal">
    <div id="loginform" class="loginform n">
        <!--事实上可以整个模板替换-->
        <div>
            <div class="loginformfield">
                <span class="form-icon"><img src="__PUBLIC__/view/img/logo-50-50.jpg"></span>
            </div>
            <div class="loginformfield">
                    <span class="form-title">
                    <h2 class="revealTableNum">第 03 桌</h2>
                    </span>
            </div>
            <div class="loginformfield" style="overflow: scroll">
                <div class="checkout-tablehead">
                	<div class="cell itemname">菜品</div>
                	<div class="cell itemquantity">份数</div>
                	<div class="cell itemtotal" style='display:none;'>小计（元）</div>
            	</div>
                <ul class="checkout-body" id="checkout-body">
                    <li class='checkout-tablerow'>
                        <div class='cell itemname' id="dishone">宫保鸡丁</div>
                        <div class='cell itemquantity'>3</div>
                        <div class='cell itemtotal'>20</div>
                    </li>

                </ul>
            </div>
            <div class="loginformfield">

            </div>
        </div>
        <div class="loginform-buttons">
            <a id="closeReveal" class="save-btn" href="#">确定</a>
            <span>友情提示：点击空白区域可关闭本窗口</span>
        </div>
    </div>
    <a class="close-reveal-modal"><img src="__PUBLIC__/view/img/icon_close.png" height="24" width="24"></a>
</div>



<script src="__PUBLIC__/view/js/md5.js"></script>
<script src="__PUBLIC__/view/js/myInfo.js"></script>
<script src="__PUBLIC__/view/js/shopInfo.js"></script>
<script src="__PUBLIC__/view/js/login.js"></script>

<script src="__PUBLIC__/view/js/header.js"></script>
<script src="__PUBLIC__/view/js/shop.js"></script>
<script type="text/javascript">
    $(function () {
        //存商家信息到cookie
        var shopId = $('.shop-name').attr('shopId');
        var shopName = $('.shop-name').attr('shopName');
        var shopPhone = $('.shop-name').attr('shopPhone');
        $.cookie('shopId', shopId, {expires: 365, path: '/'});//写cookie
        //初始化购物车
        initCart();
        $('.shop-cart').show();

        //左侧导航
        var zh = $(window).height();
        var leftHeight = zh - 55;
        $(".leftmenu").height(leftHeight);
        //公告宽度
        processGonggao();

        //菜品div宽度
        processMenuItems();

        //购物车
        processShopItem();


        $('.gonggao').show();
        $('.content-middle').show();


        //监听窗口尺寸
        $(window).resize(function () {

            //设置左侧的高
            var zh = $(window).height();
            var leftHeight = zh - 55;
            $(".leftmenu").height(leftHeight);
            //公告宽度
            processGonggao();

            //菜品div宽度
            processMenuItems();

            //购物车
            processShopItem();


//            console.log("可能会是"+(zh-100));
//            console.log($("#idSwiper"));

            $("#idSwiper").css = "height:"+leftHeight;
            $("#idSwiper").height((zh-100));

        });


        //左侧点击
        $('.leftmenu-item a').click(function () {
            //变样式
            $(this).parents('.leftmenu').find('.leftmenu-item').removeClass('active');
            $(this).parent().addClass('active');
            //变菜品
            var i = $(this).parents('dd').attr('id');
            $('.menu-wrap').hide();
            var m = "#" + i.replace('i', 'm');
            $(m).fadeIn(600);
        });


        //菜品相关
        function processMenuItems() {
            var zw = $(window).width();
            var zh = $(window).height();


            var shopCartWidth = $('.shop-cart').width();
            var leftMenuWidth = $('.leftmenu').width();
            var mw = zw - shopCartWidth - leftMenuWidth;



            $(".content-middle").width(mw);
            $(".content-middle").css('left', leftMenuWidth);
            $(".menu-wrap").width(mw);

            var percent = '48%';
            var marginLeft = 0;


        if (zw >= 1000) {
//            if (mw >= 700) {
                console.log("没道理啊");
                percent = '48%';
                marginLeft = mw - mw * 0.48 * 2;
                if (zw < 1240) {
                    $(".stars").css('bottom', 40);
                    $(".price").css('left', '');
                    // $(".buy").css('left', 180);
                    $(".price").css('right', 10);
                    $(".buy").css('right', 10);
                } else {
                    //当zw> 1240时,每个item只占30%(这样就可以一行显示3个)
                    percent = '30%';
                    marginLeft = mw - mw * 0.30 * 3;
                    //样式归位
                    $(".stars").css('bottom', 5);
                    $(".price").css('left', '');
                    // $(".buy").css('left', '');
                    $(".price").css('right', 10);
                    $(".buy").css('right', 10);
                }
                $(".header").css('min-width', "1000px");
            }
//            else if (mw < 700) {
            else if (zw < 1000) {
                console.log("没道理啊《1000");
                percent = '96%';
                marginLeft = mw - mw * 0.96;

                if (zw < 660) {
                    $(".stars").css('bottom', 40);
                    $(".price").css('left', '').css('right', '50');
                    // $(".buy").css('left', 180);
                    $(".buy").css('right', 10);
                } else {
                    //样式归位
                    $(".stars").css('bottom', 5);
                    $(".price").css('left', '').css('right', 50);
                    // $(".buy").css('left', '');
                    $(".buy").css('right', 10);
                }

                $(".header").css('min-width', "300px");
            }


            $(".menu-item").css('width', percent);
            $(".item-wrap").css('margin-left', marginLeft);
            $(".header").css('width', "100%");
        }

        //公告宽度
        function processGonggao() {
            var zw = $(window).width();
            var shopCartWidth = $('.shop-cart').width();
            var leftMenuWidth = $('.leftmenu').width();
            var gw = zw - shopCartWidth - leftMenuWidth - 40;
            var gw_wrap = gw + 50;
            $(".gonggao").width(gw);
            $(".gonggao").css('left', leftMenuWidth + 10);
            $(".gonggao-wrap").width(gw_wrap);
            $(".gonggao-wrap").css('left', leftMenuWidth);
        }







        window.onload=function(){
//            alert("onload???");
            console.log("onload");
            processMenuItems();
        };

    });




</script>


<script src="__PUBLIC__/view/js/doing.js"></script>
<script src="__PUBLIC__/view/js/swiper.jquery.min.js"></script>


<script>
    var showList = "{:U('Order/getOrderList')}";
</script>



<script>


    //重设swiper的高度
    var zh = $(window).height();
    $("#idSwiper").height((zh-100));
//    console.log("这个重设可吧》》"+(zh-100));

    var index = layer.load();
    $.ajax({
        type: "post",
        url:showList,
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("订单获取失败!");
            layer.close(index);
        },
        data: {},
        dataType: "json",
        success: function (data) {
            //TODO: sleep
//            for (var t = Date.now(); Date.now() - t <= 2000;);

//            console.log(data);
//            console.log("json>>"+data.dish);
            //使用template.js加载布局
            $('#template1').tmpl(data).appendTo('#m1');

//            mySwiper.update(true);

            var jsonData = JSON.stringify(data);
            $('#inputData').val(jsonData);
//            console.log("jsonData>>>"+jsonData);

//            console.log(data[0]);
//            console.log(data[0].name);
//            resetClickListener($);
            resetItemClickListener();
            layer.close(index);
        }
    });

</script>


<script>



    var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id
        //如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
        //解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
        down: {
            callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
        },
        up: {
            callback: upCallback //上拉加载的回调
        }
    });



    //下拉刷新的回调
    function downCallback() {
//        $.ajax({
//            url: 'xxxxxx',
//            success: function(data) {
//                //联网成功的回调,隐藏下拉刷新的状态;
//                mescroll.endSuccess(); //无参
//                //设置数据
//                //setXxxx(data);//自行实现 TODO
//            },
//            error: function(data) {
//                //联网失败的回调,隐藏下拉刷新的状态
//                mescroll.endErr();
//            }
//        });

        var index = layer.load();
        $.ajax({
            type: "post",
            url:showList,
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("订单获取失败!");
                mescroll.endErr();
                layer.close(index);
            },
            data: {},
            dataType: "json",
            success: function (data) {
                //TODO: sleep
//            for (var t = Date.now(); Date.now() - t <= 2000;);

//                console.log(data);
//            console.log("json>>"+data.dish);
                $('#m1').empty();
                //使用template.js加载布局
                $('#template1').tmpl(data).appendTo('#m1');

//            mySwiper.update(true);

                var jsonData = JSON.stringify(data);
                $('#inputData').val(jsonData);
//                console.log("jsonData>>>"+jsonData);

//            console.log(data[0]);
//            console.log(data[0].name);
//            resetClickListener($);
                resetItemClickListener();

                //联网成功的回调,隐藏下拉刷新的状态;
                mescroll.endSuccess(); //无参

                layer.close(index);
            }
        });


    }

    //上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
    function upCallback(page) {
//        $.ajax({
//            url: 'xxxxxx?num=' + page.num + "&size=" + page.size, //如何修改page.num从0开始 ?
//            success: function(data) {
//                //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
//                //参数data.length:当前页的数据总数
//                //mescroll会根据data.length自动判断列表如果无任何数据,则提示空,显示empty配置的内容;
//                //列表如果无下一页数据,则提示无更多数据,(注意noMoreSize的配置)
//                //如果你需要强制显示无更多数据,则mescroll.endSuccess(0),注意noMoreSize的配置
//                //如果不传data.length,则仅隐藏下拉刷新的状态
//                mescroll.endSuccess(data.length);
//                //设置列表数据
//                //setListData(data);//自行实现 TODO
//            },
//            error: function(e) {
//                //联网失败的回调,隐藏下拉刷新和上拉加载的状态
//                mescroll.endErr();
//            }
//        });
    }


</script>
</body>
</html>